<template>
  <el-card class="w-full flex flex-col flex-none">
    <template #header>
      <div class="flex justify-center">
        <span class="record-title">{{ recordItem.workCenterName }}</span>
      </div>
    </template>
    <template #default>
      <div class="flex flex-col justify-between flex-1 h-full">
        <div class="record-content">
          <div class="record-item" v-for="record in recordItemLabel">
            <span>{{ record.name }}</span>
            <span>{{ recordItem[record.value] }}</span>
          </div>
          <div class="record-item">
            <span>图片</span>
            <span>{{
              recordImages.length !== 0 ? recordImages.length + "张" : "无"
            }}</span>
          </div>
          <div class="record-images" v-if="recordImages.length !== 0">
            <el-image
              v-for="image in recordImages.slice(0, 3)"
              :src="image"
              @click="toggleShow"
            >
            </el-image>
            <div v-if="showPreview">
              <el-image-viewer
                :url-list="recordImages"
                @switch="changeImgIndex"
                @close="toggleShow"
              >
              </el-image-viewer>
              <span class="count-number"
                >{{ previewImgIndex }} / {{ recordImages.length }}</span
              >
            </div>
          </div>
        </div>
        <div class="record-footer">
          <el-button
            class="record-btn canel"
            v-if="recordItem.callState == 1"
            @click="changeCallState(recordItem, 2)"
            >取消</el-button
          >
          <el-button
            class="record-btn reach"
            v-if="recordItem.callState == 3"
            @click="changeCallState(recordItem, 4)"
            >到达</el-button
          >
          <el-button
            class="record-btn canel"
            v-if="recordItem.callState == 5"
            @click="changeCallState(recordItem, 6)"
            >维修完成</el-button
          >
          <el-button
            class="record-btn complete"
            v-if="recordItem.callState == 8"
            @click="changeCallState(recordItem, 9)"
            >复工</el-button
          >
          <el-button
            class="record-btn complete"
            v-if="recordItem.callState == 6"
            @click="changeCallState(recordItem, 7)"
            >呼叫质量确认</el-button
          >

          <el-button
            class="record-btn complete"
            v-if="recordItem.callState == 7"
            @click="changeCallState(recordItem, 8)"
            >质量确认完成</el-button
          >

          <el-button
            class="record-btn canel"
            v-if="recordItem.callState > 4 && recordItem.callState < 6"
            @click="changeCallState(recordItem, 10)"
            >挂起</el-button
          >
          <el-button
            class="record-btn close"
            v-if="recordItem.callState >= 3"
            @click="changeCallState(recordItem, 11)"
            >关闭</el-button
          >
        </div>
      </div>
    </template>
  </el-card>
</template>

<script setup>
import { updateCallState, getinfo } from "@/api/andon/andon.ts";
import { ElMessage } from "element-plus";
const emits = defineEmits(["refresh"]);
const recordItemLabel = reactive([
  {
    name: "工序",
    value: "processName",
  },
  {
    name: "呼叫类型",
    value: "callTypeName",
  },
  {
    name: "停机原因",
    value: "stopReasonName",
  },
  {
    name: "呼叫状态",
    value: "callStateName",
  },
  {
    name: "呼叫时长",
    value: "callmins",
  },
  {
    name: "呼叫时间",
    value: "callTime",
  },
]);
const props = defineProps({
  recordItem: {
    type: Object,
    default: () => ({}),
  },
});
// 获取详情信息
const recordImages = ref([]);
const getdetailinfo = async () => {
  const { data } = await getinfo(props.recordItem.id);
  recordImages.value = data.imgaes;
};

// 修改状态
const changeCallState = async (item, code) => {
  const loadingMessage = ElMessage({
    message: "加载中...",
    type: "info",
  });
  await updateCallState({ id: item.id, callState: code });
  loadingMessage.close();
  ElMessage({
    message: "操作完成",
    type: "success",
  });
  emits("refresh");
};

// 显示预览
const showPreview = ref(false);
const previewImgIndex = ref(1);
const toggleShow = ()=>{
  showPreview.value = !showPreview.value;
}
const changeImgIndex = (index) => {
  previewImgIndex.value = index + 1;
};
onMounted(() => {
  getdetailinfo();
});
</script>

<style scoped lang="scss">
$primary-color: #16254e;
.record-title {
  border-top: 1px solid $primary-color;
  border-bottom: 1px solid $primary-color;
  color: $primary-color;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 0;
  margin: 0;
}
.record-content {
  font-size: 14px;
  color: $primary-color;
  .record-item {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
  }
  .record-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    height: 80px;
    margin: 10px 0;
    .el-image {
      width: 84px;
      height: 80px;
    }
    .count-number {
      position: fixed;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      z-index: 99999;
    }
  }
}
.record-footer {
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .record-btn {
    width: 90px;
    height: 30px;
    outline: none;
    border: none;
    line-height: 30px;
    border-radius: 10px;
    font-size: 14x;
  }
  .reach {
    background-color: #000a7b;
    color: #ffffff;
    box-shadow: 0 0 4px #000a7b;
  }
  .canel {
    background-color: #ffffff;
    color: #000a7b;
    box-shadow: 0 0 4px #888888;
  }
  .complete {
    background-color: #ffffff;
    color: #007aff;
    box-shadow: 0 0 4px #888888;
  }
  .close {
    background-color: #ffffff;
    color: #dd524d;
    box-shadow: 0 0 4px #888888;
  }
}
:deep(.el-image__inner) {
  object-fit: cover;
  width: 84px;
  height: 80px;
  border-radius: 4px;
}
:deep(.el-card__body) {
  flex: 1;
}
:deep(.el-card__header) {
  border-bottom: none;
}
</style>
